<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8"/>
    <title>06-refs字符串形式</title>
    <script src="./js/react.development.js"></script>
    <script src="./js/react-dom.development.js"></script>
    <script src="./js/prop-types.js"></script>
    <script src="./js/babel.js"></script>
</head>
<body>
<div id="app"></div>
</body>
<script type="text/babel">
    class Demo extends React.Component {

        // 渲染函数
        render() {
            return (
                <div>
                    <label>
                        <input type="text" ref="pre"/>
                    </label>
                    <button onClick={this.handelClick}>点我</button>
                    <label>
                        <input type="text" ref="next" onBlur={this.handelBlur}/>
                    </label>
                </div>
            )
        }

        // 处理点击事件
        handelClick = () => {
            console.log('处理点击事件');

            // 输出ref对象的属性
            console.log(this.refs.pre.value);
        }

        // 失去焦点处理
        handelBlur = () => {
            console.log('失去焦点处理');

            // 输出ref对象的属性
            console.log(this.refs.next.value);
        }
    }

    // 渲染数据
    ReactDOM.render(<Demo/>, document.getElementById('app'));
</script>
</html>
